<template>
  <motion.div
    :initial="{ scale: 0, x: -9, y: -10, rotate: angle }"
    :animate="{ scale: 1 }"
    :transition="{ duration: 0.3 }"
    class="add-node-container"
    :style="{
      backgroundColor: type === 'source' ? '#eff4ff' : '#edfaef',
      border: `1px solid ${type === 'source' ? '#5F95FF' : '#3ac575'}`,
      color: type === 'source' ? '#5F95FF' : '#3ac575'
    }"
  >
    <div class="add-node-icon">+</div>
  </motion.div>
</template>

<script setup lang="ts">
import { motion } from 'motion-v'
import { inject, onMounted, ref } from 'vue'
import { Node } from '@antv/x6'

const nodeMsg = inject('getNode') as any
const node = ref<Node | null>(null)
const type = ref('')
const angle = ref(0)

onMounted(() => {
  initNode()
})

const initNode = () => {
  if (node.value === null) {
    node.value = nodeMsg() as Node
    type.value = node.value.getData().type
    angle.value = node.value.getData().direction
  }
}
</script>

<style scoped>
.add-node-container {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  cursor: pointer;
}
.add-node-icon {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
